﻿@{
    ViewBag.Title = "SNShow";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <script src="~/libs/jquery/jquery.js"></script>
    <link href="//unpkg.com/layui@2.9.16/dist/css/layui.css" rel="stylesheet">
    <script src="//unpkg.com/layui@2.9.16/dist/layui.js"></script>
</head>
<body>

    <form class="layui-form layui-row layui-col-space16">
        <div class="layui-col-md2">
            <div class="layui-input-wrap">
                <input type="text" name="snCode" value="" placeholder="请输入 SN 编码" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-col-md2">
            <div class="layui-input-wrap">
                <input type="text" name="itemCode" value="" placeholder="请输入生产物料编码" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-col-md2">
            <div class="layui-input-wrap">
                <input type="text" name="itemName" value="" placeholder="请输入生产物料名称" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-col-md2">
            <div class="layui-input-wrap">
                <input type="text" name="batchCode" value="" placeholder="请输入批次号" class="layui-input" lay-affix="clear">
            </div>
        </div>

        <div class="layui-btn-container layui-col-xs12">
            <button class="layui-btn" id="btnSearch" lay-submit lay-filter="demo-table-search">搜索</button>

            <button type="button" class="layui-btn layui-btn-normal" onclick="add()">添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>

    <table class="layui-hide" id="ID-table-demo-search" lay-filter="test">
    </table>

    <script type="text/html" id="toolDemo">
        <div class="layui-clear-space">
            <a class="layui-btn layui-bg-red" lay-event="more">删除</a>
        </div>
    </script>

    <script>
        layui.use(['table', 'form'], function () {
            var table = layui.table;
            var form = layui.form;
            var laydate = layui.laydate;

            function GetShow() {
                // 创建渲染实例
                table.render({
                    elem: '#ID-table-demo-search',
                    url: '/api/app/qi/sn-show',
                    cols: [[
                        { type: 'checkbox', fixed: 'left' },
                        { field: 'SnCode', width: 150, title: 'SN 编码' },
                        { field: 'ItemCode', width: 180, title: '产品编码' },
                        { field: 'ItemName', width: 150, title: '产品名称' },
                        { field: 'Specification', width: 150, title: '规格型号' },
                        { field: 'UnitOfMeasure', width: 150, title: '单位' },
                        { field: 'BatchCode', width: 150, title: '批次号' },
                        {
                            field: 'CreateTime', width: 300, title: '生成时间', templet: function (d) {
                                // 假设时间格式为 ISO 8601，如 2024-10-09T12:34:56Z
                                var date = new Date(d.CreateTime);
                                return date.getFullYear() + '-' +
                                    ('0' + (date.getMonth() + 1)).slice(-2) + '-' +
                                    ('0' + date.getDate()).slice(-2) + ' ' +
                                    ('0' + date.getHours()).slice(-2) + ':' +
                                    ('0' + date.getMinutes()).slice(-2) + ':' +
                                    ('0' + date.getSeconds()).slice(-2);
                            }
                        },
                        { field: 'writes', title: '操作', width: 180, toolbar: "#toolDemo" }
                    ]],
                    title: 'SN 管理表',
                    page: true,
                    limit: 3,
                    limits: [3, 6, 9, 12],
                });
                laydate.render({
                    elem: '.demo-table-search-date'
                });
            }

            GetShow();

            // 表单搜索
            form.on('submit(demo-table-search)', function (data) {
                // 表单提交
                table.reload('ID-table-demo-search', {
                    where: data.field,
                    page: {
                        curr: 1
                    }
                });
                return false;
            });

            // 表单重置
            form.on('reset(demo-table-search)', function (data) {
                // 表单重置
                data.field.clientCode = "";
                data.field.clientName = "";
                table.reload('ID-table-demo-search', {
                    where: data.field,
                    page: { curr: 1 }
                });
                return false;
            });

            // 监听表行工具栏事件
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;
                if (layEvent === 'more') {
                    layer.confirm('真的删除行么', function () {
                        $.ajax({
                            url: '/QiData/DelSn',
                            type: 'GET',
                            data: { id: obj.data.Id },
                            dataType: 'json',
                            success: function (res) {
                                if (res != null) {
                                    alert("删除成功");
                                    window.location.href = "/QiData/SNShow/";
                                }
                            }
                        });
                    });
                }
            });
        });

        function add() {
            layer.open({
                type: 2,
                area: ['80%', '80%'],
                title: '添加客户',
                shade: 0.6,
                shadeClose: true,
                maxmin: true,
                anim: 0,
                content: '/QiData/SNAdd',
                end: function () {
                    window.location = '/QiData/SNShow?' + new Date().getTime();
                }
            });
        }
    </script>

</body>
</html>